<template>
  <el-main class="layout-main">
    <el-card class="device-report-card">
      <h2>设备报修</h2>
      <el-form
          :model="form"
          ref="formRef"
          label-width="100px"
          :rules="rules"
          size="default"
      >
        <!-- 会议室下拉 -->
        <el-form-item label="会议室" prop="room">
          <el-select
              v-model="form.room"
              placeholder="请选择会议室"
              filterable
              clearable
          >
            <el-option
                v-for="room in rooms"
                :key="room"
                :label="room"
                :value="room"
            />
          </el-select>
        </el-form-item>

        <!-- 设备名称下拉 -->
        <el-form-item label="设备名称" prop="device">
          <el-select
              v-model="form.device"
              placeholder="请选择设备"
              filterable
              clearable
          >
            <el-option
                v-for="device in devices"
                :key="device"
                :label="device"
                :value="device"
            />
          </el-select>
        </el-form-item>

        <!-- 故障描述 -->
        <el-form-item label="问题描述" prop="description">
          <el-input
              type="textarea"
              :rows="4"
              v-model="form.description"
              placeholder="请输入故障描述"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitReport">提交报修</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

interface ReportForm {
  room: string
  device: string
  description: string
}

// 表单引用与数据
const formRef = ref<FormInstance>()
const form = ref<ReportForm>({
  room: '',
  device: '',
  description: '',
})

// 校验规则
const rules = {
  room: [{ required: true, message: '请选择会议室', trigger: 'change' }],
  device: [{ required: true, message: '请选择设备', trigger: 'change' }],
  description: [{ required: true, message: '请填写故障描述', trigger: 'blur' }],
}

// 会议室列表（示例随机，可按需增删）
const rooms = Array.from({length: 30}, (_, i) => {
  const buildingIndex = i % 7;
  const building = String.fromCharCode(65 + buildingIndex); // A-G
  const floor = Math.floor(i / 7) + 1;
  const roomNum = 100 + (i % 20);
  return `${building}区${building}${floor}号楼${roomNum}`;
});

// 设备列表
const devices = [
  '投影仪','电视','麦克风','音响','白板',
  '视频会议设备','录音设备','激光笔','显示屏','无线分享器'
]

// 提交报修
function submitReport() {
  formRef.value?.validate((valid) => {
    if (!valid) return
    ElMessage.success('报修申请已提交，等待管理员处理')
    // 重置表单
    form.value = { room: '', device: '', description: '' }
  })
}
</script>

<style scoped>
.layout-main {
  padding: 0;
}
.device-report-manage-card {
  padding: 20px;
}
.table-container {
  overflow-x: hidden;
}
</style>
